<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

    
</head>
<body class="hold-transition skin-red sidebar-mini">
  <!-- .box-body -->
                    <div class="box-header with-border">
                        <h3 class="box-title">品牌管理</h3>
                    </div>

                    <div class="box-body">

                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
                                        <button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>           
                                        <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">
                                <div class="has-feedback">
							                                         
                                </div>
                            </div>
                            <!--工具栏/-->

			                  <!--数据列表-->
			                  <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			                      <thead>
			                          <tr>
			                              <th class="" style="padding-right:0px">
			                                  <input id="selall" type="checkbox" class="icheckbox_square-blue">
			                              </th> 
										  <th class="sorting_asc">品牌ID</th>
									      <th class="sorting">品牌名称</th>									      
									      <th class="sorting">品牌首字母</th>									     				
					                      <th class="text-center">操作</th>
			                          </tr>
			                      </thead>
								  <tbody id="brand">

								  </tbody>
                                  <div class="container">
                                      <ul class="pagination">
                                          <a href="javascript:toPage(3)">首页</a>
                                          <a href="javascript:toPage(1)">上一页</a>
                                          <a href="javascript:toPage(2)">下一页</a>
                                          <a href="javascript:toPage(4)">尾页</a>
                                          当前第<input type="text" id="pageNum" name="pageNum" size="1">页
                                          每页<input type="text" id="pageSize" name="pageSize" size="1">条
                                          共<input type="text" id="totalPage" readonly="readonly" size="1">页
                                          共<input type="text" id="totalCount" readonly="readonly" size="1">条
                                      </ul>
                                  </div>
			                  </table>
			                  <!--数据列表/-->
                        </div>
                        <!-- 数据表格 /-->
                     </div>
                    <!-- /.box-body -->
         
<!-- 编辑窗口 -->
  <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" >
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h3 id="myModalLabel">品牌编辑</h3>
              </div>
              <div class="modal-body">
                  <table class="table table-bordered table-striped"  width="800px">
                      <tr>
                          <td>品牌ID</td>
                          <td><input  class="form-control" placeholder="品牌ID" name="id">  </td>
                      </tr>
                      <tr>
                          <td>品牌名称</td>
                          <td><input  class="form-control" placeholder="品牌名称" id="names" name="name">  </td>
                      </tr>
                      <tr>
                          <td>首字母</td>
                          <td><input  class="form-control" placeholder="首字母" id="firstChars" name="firstChar">  </td>
                      </tr>
                  </table>
              </div>
              <div class="modal-footer">
                  <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="add()">保存</button>
                  <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
              </div>
          </div>
      </div>
  </div>
<!--xiugai-->
  <div class="modal fade" id="editModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog" >
           <div class="modal-content">
               <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                   <h3 id="myModalLabels">品牌编辑</h3>
               </div>
               <div class="modal-body">
                   <table class="table table-bordered table-striped"  width="800px">
                       <tr>
                           <td>品牌ID</td>
                           <td><input  class="form-control" placeholder="品牌ID" id="id" name="id">  </td>
                       </tr>
                       <tr>
                           <td>品牌名称</td>
                           <td><input  class="form-control" placeholder="品牌名称" id="name" name="name">  </td>
                       </tr>
                       <tr>
                           <td>首字母</td>
                           <td><input  class="form-control" placeholder="首字母" id="firstChar" name="firstChar">  </td>
                       </tr>
                   </table>
               </div>
               <div class="modal-footer">
                   <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="updatas()">保存</button>
                   <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
               </div>
           </div>
       </div>
   </div>
   
</body>
</html>
<script>
    $(function (){
          getBrand();
       })

       function getBrand(){
		  var pageNum = $("#pageNum").val();
          $.ajax({
             url:"/brandController/selectAll",
             type:"get",
             dataType:"json",
			  data:{pageNum:pageNum},
             success:function (selevt){
                 var page =  selevt.data;
                 var list = page.list;
                var table = "";
                for(var i = 0; i < list.length; i++){
                   table += '<tr>';
                   table += '<td><input type="checkbox" value="' + list[i].id + '" name="ids"></td>';
                   table += '<td>' + list[i].id + '</td>';
                   table += '<td>' + list[i].name + '</td>';
                   table += '<td>' + list[i].firstChar + '</td>';
                   table += '<td class="text-center">';
                   table += '<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModals" onclick="update(' + list[i].id + ')">修改</button>';
                   table += '<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" onclick="del(' + list[i].id + ')">删除</button>';
                   table += '</td>';
                   table += '</tr>';
                }
                table += '</table>';
                $("#brand").html(table);
				 pageInstall(page);
             },
             error:function (){
                alert("数据错误");
             }
          })
       }
       function add() {
           alert("增加方法")
           var names = $("#names").val();
           var firstChars = $("#firstChars").val();
            $.ajax({
                url:"/brandController/insert",
                data: {name:names,firstChar:firstChars},
                type:"post",
                dataType:"json",
                success:function (parameter) {
                    alert(parameter.code)
                    if(parameter.code == 100){
                        alert("增加成功")
                    }else{
                        alert("增加错误")
                    }
                },
                error:function () {
                    alert("代码错误")
                }
            })
       }

       function del(id) {
           alert("删除方法"+id);
            $.ajax({
                url:"/brandController/delete?id="+id,
                type:"post",
                dataType:"json",
                success:function (parameter) {
                    if(parameter.code == 100){
                        alert("删除成功")
                    }else{
                        alert("删除错误")
                    }
                },
                error:function () {
                    alert("代码错误")
                }
            })
       }

       function update(id) {
           alert("修改方法"+id);
            $.ajax({
                url:"/brandController/updata?id="+id,
                type:"post",
                dataType:"json",
                success:function (parameter) {
                    var parameter = parameter.data;
                  $("#id").val(parameter.id);
                  $("#name").val(parameter.name);
                  $("#firstChar").val(parameter.firstChar);
                },
                error:function () {
                    alert("代码错误")
                }
            })

       }

       function updatas() {
           alert("修改方法")
           var ids = $("#id").val();
           var names = $("#name").val();
           var firstChars = $("#firstChar").val();
            $.ajax({
                url:"/brandController/updatas",
                data: {id:ids,name:names,firstChar:firstChars},
                type:"post",
                dataType:"json",
                success:function (parameter) {
                    if(parameter.code == 100){
                        alert("修改成功")
                    }else{
                        alert("修改错误")
                    }
                },
                error:function () {
                    alert("代码错误")
                }
            })
       }

	function pageInstall(page){
 	//获取页面文本框并赋值 (当前页数)
 	$("#pageNum").val(page.pageNum);
 	$("#pageSize").val(page.pageSize);
 	$("#totalPage").val(page.lastPage);
 	$("#totalCount").val(page.total);
 }

	function toPage(flag){
 	var pageNumber = parseInt($("#pageNum").val());
 	alert(pageNumber);
 	var totalPages = parseInt($("#totalPage").val());
 	alert(totalPages)
 	if(flag == 1){
 		if(pageNumber <= 1){
 			//alert("已经是首页");
             toastr.success("已经是首页");

 			return;
 		}
 		$("#pageNum").val(pageNumber - 1);
 	}else if(flag == 2){
 		if(pageNumber >= totalPages){
 			alert("已经是尾页");
             toastr.success("已经是尾页");
 			return;
 		}
 		$("#pageNum").val(pageNumber + 1);
 	}else if(flag == 3){
 		if(pageNumber <= 1){
 			//alert("已经是首页");
             toastr.success("已经是首页");
 			return;
 		}
 		$("#pageNum").val(1);
 	}else if(flag == 4){
 		if(pageNumber >= totalPages){
 			//alert("已经是尾页");
             toastr.success("已经是尾页");
 			return;
 		}
 		$("#pageNum").val(totalPages);
 	}
		getBrand();
 }
</script>